<script setup>
  import { ref } from 'vue'
  import { getTagList, addTag } from '@/api/tag'
  import { addArticle, getArticleById, updateArticle } from '@/api/article'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const isEdit = ref(false)
  const isLoading = ref(true)
  const form = ref({
    title: '',
    content: '',
    pictureId: null,
    tagId: null,
    status: 1,
    isTop: 0,
    picturePath: ''
  })
  if (route.query.id !== void 0) {
    isEdit.value = true
    getArticleById(route.query.id).then(res => {
      form.value = {
        ...res.data,
        picturePath: res.data.coverUrl,
        pictureId: res.data.coverId
      }
    })
  }
  if (route.query.tagId !== void 0) {
    form.value.tagId = parseInt(route.query.tagId)
  }
  const newTag = ref('')
  const tagList = ref([])
  const isAdding = ref(false)
  getTagList().then(res => {
    tagList.value = res.data
  })
  const handleAddTag = () => {
    if (newTag.value) {
      addTag({
        name: newTag.value
      }).then(res => {
        ElMessage.success('添加成功')
        tagList.value.push({
          id: res.data,
          name: newTag.value
        })
        newTag.value = ''
        isAdding.value = false
      })
    } else {
      ElNotification({
        title: '错误',
        message: '标签名称不能为空',
        type: 'error'
      })
    }
  }
  const POST = () => {
    if (form.value.title == '' || form.value.content == '<p><br></p>') {
      ElMessage.error('标题和内容不能为空')
      return
    }
    if (form.value.title.length > 30) {
      ElMessage.error('标题不能超过30个字符')
      return
    }
    if (form.value.tagId == '' || form.value.tagId == null) {
      ElMessage.error('请选择标签')
      return
    }
    if (isEdit.value) {
      updateArticle(form.value).then(() => {
        ElMessage.success('更新成功')
        router.push('/')
      })
    } else {
      addArticle(form.value).then(() => {
        ElMessage.success('发布成功')
        router.push('/')
      })
    }
  }
  const postSelected = ref(null)
  const handleOpen = () => {
    postSelected.value.open()
  }
  const handleSelect = picture => {
    form.value.pictureId = picture.id
    form.value.picturePath = picture.path
  }
  const handleClose = () => {
    form.value.pictureId = null
    form.value.picturePath = ''
  }
</script>

<template>
  <div class="post">
    <div class="page">
      <div class="header">
        <span class="line"></span>
        <span>{{ isEdit ? '修改文章' : '发布文章' }}</span>
      </div>
      <div class="big-box" v-show="!isLoading">
        <div class="left-box">
          <div class="upload-box flex-center">
            <div class="upload flex-center" v-if="!form.pictureId">
              <button @click="handleOpen()" class="uploadButton button">
                选择封面
              </button>
            </div>
            <div class="img" v-else>
              <el-image :src="form.picturePath" />
              <div class="close" @click="handleClose">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiao"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="form">
            <el-select
              v-model="form.tagId"
              filterable
              default-first-option
              :reserve-keyword="false"
              no-match-text="无匹配数据"
              placeholder="请选择文章的标签"
              no-data-text="暂无标签"
              style="width: 200px; margin-top: 10px"
            >
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
              <template #footer>
                <button
                  v-if="!isAdding"
                  class="addTag"
                  style="width: 80px; height: 25px; font-size: 12px"
                  @click="isAdding = true"
                >
                  添加标签
                </button>
                <template v-else>
                  <el-input
                    v-model="newTag"
                    class="option-input"
                    placeholder="请输入标签名称"
                    size="small"
                  />
                  <button
                    class="addTag"
                    style="width: 50px; height: 25px; font-size: 12px"
                    @click="handleAddTag"
                  >
                    确认
                  </button>
                  <button
                    class="addTag"
                    style="width: 50px; height: 25px; font-size: 12px"
                    @click="isAdding = false"
                  >
                    取消
                  </button>
                </template>
              </template>
            </el-select>
          </div>
          <!-- <div class="form">
            <div class="label">文章状态</div>
            <div class="content">
              <el-radio-group v-model="form.status">
                <el-radio :value="1" size="large">公开</el-radio>
                <el-radio :value="0" size="large">私密</el-radio>
              </el-radio-group>
            </div>
          </div> -->
          <div class="form">
            <div class="label">置顶状态</div>
            <div class="content">
              <el-radio-group v-model="form.isTop">
                <el-radio :value="1" size="large">开启</el-radio>
                <el-radio :value="0" size="large">取消</el-radio>
              </el-radio-group>
            </div>
          </div>
          <button class="post-button button" @click="POST">
            {{ isEdit ? '修改' : '发布' }}
          </button>
        </div>
        <div class="right-box">
          <div class="upload-box mobile-flex flex-center">
            <div class="upload" v-if="!form.pictureId">
              <button @click="handleOpen()" class="uploadButton button">
                选择封面
              </button>
            </div>
            <div class="img" v-else>
              <el-image :src="form.picturePath" />
              <div class="close" @click="handleClose">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiao"></use>
                </svg>
              </div>
            </div>
          </div>
          <el-input
            v-model="form.title"
            maxlength="30"
            placeholder="请填写文章的标题"
            show-word-limit
            type="text"
          />
          <div class="form mobile">
            <el-select
              v-model="form.tagId"
              filterable
              default-first-option
              :reserve-keyword="false"
              no-match-text="无匹配数据"
              placeholder="请选择文章的标签"
              no-data-text="暂无标签"
              style="width: 200px; margin-top: 10px"
            >
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
              <template #footer>
                <button
                  v-if="!isAdding"
                  class="addTag"
                  style="width: 80px; height: 25px; font-size: 12px"
                  @click="isAdding = true"
                >
                  添加标签
                </button>
                <template v-else>
                  <el-input
                    v-model="newTag"
                    class="option-input"
                    placeholder="请输入标签名称"
                    size="small"
                  />
                  <button
                    class="addTag"
                    style="width: 50px; height: 25px; font-size: 12px"
                    @click="handleAddTag"
                  >
                    确认
                  </button>
                  <button
                    class="addTag"
                    style="width: 50px; height: 25px; font-size: 12px"
                    @click="isAdding = false"
                  >
                    取消
                  </button>
                </template>
              </template>
            </el-select>
          </div>
          <div class="flex-between wrap mobile-flex">
            <div class="form">
              <div class="label">文章状态</div>
              <div class="content">
                <el-radio-group v-model="form.status">
                  <el-radio :value="1" size="large">公开</el-radio>
                  <el-radio :value="0" size="large">私密</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="form">
              <div class="label">置顶状态</div>
              <div class="content">
                <el-radio-group v-model="form.isTop">
                  <el-radio :value="1" size="large">开启</el-radio>
                  <el-radio :value="0" size="large">取消</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <Tinymce
            :height="750"
            class="editor"
            v-model="form.content"
            @inited="isLoading = false"
          ></Tinymce>
          <div class="mobile-flex">
            <button class="post-button button" @click="POST">
              {{ isEdit ? '修改' : '发布' }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <Selected ref="postSelected" @select="handleSelect"></Selected>
  </div>
</template>

<style lang="scss" scoped>
  .editor {
    display: block;
    margin-top: 10px;
  }
  .post {
    height: calc(100vh - 80px);
  }

  .mobile {
    display: none !important;
  }

  .mobile-flex {
    display: none !important;
  }

  .form {
    margin-top: 10px;
    display: flex;
    align-items: center;

    .label {
      width: 80px;
      font-size: 14px;
      color: var(--color-primary-label);
    }
  }

  .img {
    position: relative;
    .close {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      background: var(--color-background);
      display: flex;
      border-radius: 50%;
    }
  }

  .page {
    padding: 0 24px;
    height: 100%;

    .big-box {
      display: flex;
      flex-direction: row-reverse;
      height: calc(100% - 38px);
    }

    .post-button {
      margin-top: auto;
      margin-left: auto;
      width: 110px;
      height: 40px;
      font-size: 16px;
      line-height: 24px;
      border-radius: 3px;
    }

    .upload-box {
      width: 200px;
      height: 285px;
      padding: 15px;
      border-radius: 38px;
      border: 1px solid var(--el-menu-border-color);
      background: var(--color-background);
      box-shadow:
        inset 0 0 5px var(--color-border),
        inset 0 0 10px var(--color-border);
      .uploadButton {
        border-radius: 3px;
        font-size: 14px;
        padding: 10px;
      }
    }

    .left-box {
      display: flex;
      flex-direction: column;
      padding: 20px;
    }

    .right-box {
      flex: 1;
    }
  }

  .header {
    display: flex;
    align-items: baseline;
    line-height: 28px;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 15px;
    color: var(--color-primary-label);

    .line {
      background: var(--el-color-primary);
      position: relative;
      top: 2px;
      display: inline-block;
      width: 6px;
      height: 18px;
      border-radius: 3px;
      margin-right: 2px;
    }
  }

  @media screen and (max-width: 956px) {
    .post {
      height: calc(100vh - 120px);
    }
  }

  @media screen and (max-width: 695px) {
    .page .left-box {
      display: none;
    }

    .mobile {
      display: block !important;
    }

    .editor {
      width: 90vw !important;
    }

    .mobile-flex {
      display: flex !important;
    }

    .upload-box {
      margin: 0px auto 10px !important;
    }

    .post-button {
      margin-top: 10px !important;
      margin-bottom: 50px;
    }
  }

  @media screen and (max-width: 470px) {
    .form {
      margin: 10px auto 0px !important;
    }
  }
</style>
